import {Form,Button,Input, message} from 'antd';
import {useNavigate,useLocation} from 'react-router-dom';
import './index.scss';
import {observer} from 'mobx-react';
import store from '../../store';
const Person = ()=>{
  const {Role} = store;
    const navigate = useNavigate();
    const {state:{pwd}}=useLocation();
    console.log(pwd);
    // 重置密码
    const [form] = Form.useForm();
    const onFinish = (values)=>{
        Role.setPwd(values).then(
          data=>{
            if(data.code===200){
              message.success('修改密码成功')
              navigate(-1);
            }else{
              message.error('修改密码失败')
            }
          }
        ) 
    }
    // 返回
    const goBack=()=>{
        navigate(-1);
    }
    return  <>
    <div className='person_top'>个人中心</div>
    <Form name="personForm"
    labelCol={{ span: 5 }}
    wrapperCol={{ span: 15 }}
    form={form}
    onFinish={onFinish} autoComplete="off"
    initialValues={{
      userName: pwd
    }}
    scrollToFirstError
    className="person_form">
        <Form.Item
          label="用户名"
          name="userName"         
        >
          <Input disabled />
        </Form.Item>
        <Form.Item
        name="password"
        label="新密码"
        rules={[
          {
            required: true,
            message: '请输入新密码！',
          },
          {
            // pattern: new RegExp(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{6,16}/),
            pattern: new RegExp(/[0-9]{6}/),
            // message: '必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 6-16 之间'
            message: '6个数字组合'
          }
        ]}
        hasFeedback
      >
        <Input.Password placeholder='请输入新密码' />
      </Form.Item>
      <Form.Item
             name="confirm"
             label="确定密码"
             dependencies={['password']}
             hasFeedback
             rules={[
               {
                 required: true,
                 message: '请重复输入密码',
               },
               ({ getFieldValue }) => ({
               validator(_, value) {
                 if (!value || getFieldValue('password') === value) {
                   return Promise.resolve();
                 }

                 return Promise.reject(new Error('两次密码输入不一致'));
               },
             }),
           ]}
         >
           <Input.Password placeholder='请重复输入密码' />
         </Form.Item>
        <Form.Item className='person_btn'>
           <Button type="primary" htmlType="submit"> 确定 </Button>
           <Button  onClick={()=>{goBack()}} className="te"> 取消 </Button>
        </Form.Item>
    </Form>
    </>
}
export default observer(Person)